<template>
  <div role="tabpanel" class="tab-panel" id="News">
    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        {{ item.content }}
        <button
          type="button"
          class="btn btn-primary"
          data-toggle="button"
          aria-pressed="false"
          autocomplete="off"
          @click="toDetail(item)"
        >{{ item.id }}</button>
      </li>
      
    </ul>
    <div class="alert alert-success" role="alert">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()  //拿到路由器

interface Model {
  id: number,
  content: string
}

const list = ref<Model[]>([
  { id: 10010, content: '八角笼中' },
  { id: 10020, content: '消失的它' },
  { id: 10030, content: '长安三万里' }
])

const toDetail = (item: Model) => {
  router.push({
    name: 'NewsDetail',
    params: {
      newsId: item.id,
    },
    query: {
      content: item.content
    }
  })
}
</script>

<style scoped></style>
